<template>
	<view class="home_page_topbar_main">
		<view class="three_text_view">
			<view class="menu_item" v-for="item in menusList" :key="item.id" @click="navigateToPage(item)">
				<view class="page-name" :class="{'selected-menu' : item.id === currentPageId}">
					{{item.pageName}}
				</view>
				<view class="children-view" v-if="item.isShowIcon">
					<!-- <uni-icons type="bars" color="#66596b" v-if="item.id === currentPageId"
						@click="showTravelDropdown"></uni-icons> -->
					<view class="drop-icon">
						<image src="@/static/icons/drop-down-arrow.png" mode="aspectFill"
							v-if="item.id === currentPageId && !dropdownShow" @click="showTravelDropdown"></image>
						<image src="@/static/icons/drop_down_up.png" mode="aspectFill" v-if="item.id === currentPageId && dropdownShow"
							@click="showTravelDropdown"></image>
					</view>
					<view class="dropdown-travel-menu" v-if="dropdownShow">
						<view class="travel-item-per" v-for="(travelItem,index) in item.children"
							@click="selectTravel(travelItem,index)">
							<view class="travel-item-per-text"
								:class="{ 'select-dropdown-item': currentSelectTravelId === travelItem.childId }">
								{{travelItem.childName}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mitter from '@/common/mitt/eventBus.js'
	export default {

		data() {
			return {
				dropdownShow: false, // 旅行下拉选项是否展示
				currentPageId: 1, // 当前选择的页面id
				currentSelectTravelId: 1, // 当前选择的境内游id
				menusList: [{
						id: 1,
						pageName: '发现'
					},
					{
						id: 2,
						pageName: '分享',
						isShowIcon: false,
						children: [{
								childId: 1,
								childName: '境内游'
							},
							{
								childId: 2,
								childName: '境外游'
							}
						]
					},
					// {
					// 	id: 3,
					// 	pageName: '资讯'
					// },
					{
						id: 4,
						pageName: '旅行卡'
					}
				],
			}
		},
		beforeDestroy() {
			mitter.off('closeDropDownMenu');
		},
		onHide() {
			mitter.off('closeDropDownMenu');
		},
		mounted() {
			// 默认聊天会话页面
			this.currentPageId = 1;
			// console.log(this.currentPageId);
			mitter.on('closeDropDownMenu', (data) => {
				if(data){
					this.dropdownShow = false;
				}
			})
			
			// 初始设置travelMode为境内游
			uni.setStorageSync('travelMode','境内游')
		},
		methods: {
			navigateToPage(item) {
				this.currentPageId = item.id;
				if (this.currentPageId !== 2) {
					this.menusList[1].isShowIcon = false;
					this.dropdownShow = false;
				} else {
					this.menusList[1].isShowIcon = true;
				}
				if (this.currentPageId !== 4) {
					// 让右上角的三个点显示
					mitter.emit('threeDotShow', false);
				}
				this.$emit("currentHomePageId", item.id);
			},
			// 点击下拉框展示旅行下拉框选项
			showTravelDropdown() {
				this.dropdownShow = !this.dropdownShow;
			},

			// 选择境内游还是境外游
			selectTravel(item, index) {
				this.currentSelectTravelId = item.childId
				// 发送消息
				mitter.emit('travelMode', item.childName)
				uni.setStorageSync('travelMode',item.childName)
				console.log(item.childName);
				this.dropdownShow = false;
				// 然后获取数据，根据境内还是境外获取美食和民宿以及其他的相关信息
			},
		}
	}
</script>

<style scoped>
	.home_page_topbar_main {
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		/* background-color: #55aa7f; */
	}

	.custom-nav-bar {
		height: 44px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}


	.three_text_view {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		font-size: 17px;
		color: #0c312e;
	}

	.selected-menu {
		color: #66596b;
		font-weight: bold;
		font-size: 16px;
		/* transition: all 0.1s; */
		/* 这里添加了过渡属性 */
	}

	.menu_item {
		width: 80px;
		color: #96A7AF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
	}
	
	.children-view {
		width: 20px;
		position: relative;
		padding-left: 10rpx;
		
	}

	.dropdown-travel-menu {
		position: absolute;
		top: 70rpx;
		left: -100rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		text-align: center;
		padding: 20px;
	}

	.select-dropdown-item {
		font-size: 30rpx;
		color: #66596b;
	}

	.travel-item-per {
		font-weight: 400;
		font-size: 28rpx;
		color: #000;
		margin-bottom: 20rpx;
	}

	.drop-icon image {
		width: 12px;
		height: 7.06px;
	}
</style>